<template>
	<div id="index">
		<div class="nav">
			<a href="">
				<img src="../assets/images/home-01.png" alt="" />
				<span>商秘</span>
			</a>

			<a href="">
				<img src="../assets/images/home-02.png" alt="" />
				<span>商旅</span>
			</a>

			<a href="">
				<img src="../assets/images/home-03.png" alt="" />
				<span>商模</span>
			</a>

			<a href="">
				<img src="../assets/images/home-04.png" alt="" />
				<span>商法</span>
			</a>
			<a href="">
				<img src="../assets/images/home-05.png" alt="" />
				<span>名义</span>
			</a>

			<a href="">
				<img src="../assets/images/home-06.png" alt="" />
				<span>商人</span>
			</a>

			<a href="">
				<img src="../assets/images/home-07.png" alt="" />
				<span>商恋</span>
			</a>
		</div>
		<div class="list">
			<div class="item">
				<div class="img">
					<img src="../assets/pic/img1.png" alt="" />
				</div>
				<div class="info">
					<h3>今天天气如何？</h3>
					<span>进行中</span>4个回答
				</div>
				<div class="pirce">
					悬赏￥1.00元
				</div>
			</div>
			<div class="item">
				<div class="img">
					<img src="../assets/pic/img1.png" alt="" />
				</div>
				<div class="info">
					<h3>今天天气如何？</h3>
					<span>进行中</span>4个回答
				</div>
				<div class="pirce">
					悬赏￥1.00元
				</div>
			</div>
			<p>没有更多数据</p>
		</div>
	</div>
</template>

<script>
</script>

<style scoped>
	.nav {
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		padding-top: 30px;
	}
	
	.nav a {
		width: 25%;
		min-width: 90px;
		text-align: center;
		padding-bottom: 30px;
	}
	
	.nav a span {
		display: block;
		padding-top: 10px;
		font-size: 28px;
	}
	
	.list {
		margin-top: 13px;
	}
	
	.list .item {
		padding: 20px 65px;
		display: flex;
		align-items: center;
		background: #fff;
		margin-bottom: 1px;
	}
	
	.list .item .img {
		margin-right: 20px;
		width: 75px;
		height: 75px;
	}
	
	.list .item .img img {
		width: 75px;
		height: 75px;
	}
	
	.list .item .info {
		flex-grow: 1;
		display: flex;
		flex-flow: wrap;
		align-items: center;
	}
	
	.list .item .info h3 {
		font-size: 24px;
		width: 100%;
	}
	
	.list .item .info span {
		font-size: 18px;
		background: #fe6d4b;
		border-radius: 3px;
		padding: 5px 10px;
		color: #fff;
		margin-right: 15px;
	}
	.list .item .pirce {
		font-size: 24px;
		color: #ea101f;
	}
	.list p {
		color: #424142;
		font-size: 20px;
		text-align: center;
		padding: 10px 0;
	}
</style>